import React, { Suspense } from 'react';
import PageLoading from '@/components/PageLoading';
import { Drawer, Tabs, Icon, Button, Select, Radio } from 'antd';
import Editor from '@/utils/Editor';
import WordTrough from '@/pages/Dialog/common/Drawer/wordTrough';
import { getActionNodeDetail, getStageBydialogIdAndNodeId, knowledgeDialogActionNodeInfo, knowledgeDialogNodeInfo } from '@/services/dialog';
const GlobalSet = React.lazy(() => import('../../globalSet/globalSet'));
const SpecialCase = React.lazy(() => import('../../specialCase/specialCase'));
const DialogStart = React.lazy(() => import('../../start/start'));
const DialogSlotMark = React.lazy(() => import('../../collect/slotmark/mark'));
const ActionReply = React.lazy(() => import('../../action/reply'));
const ActionApi = React.lazy(() => import('../../action/api'));
const ActionClear = React.lazy(() => import('../../action/clear'));
const DialogConfirmSetting = React.lazy(() => import('../../confirm/setting'));
const CollectSlot = React.lazy(() => import('../../collect/slotInquiry/index'));
const SlotCheck = React.lazy(() => import('../../collect/slotCheck/index'));
const SlotRules = React.lazy(() => import('../../collect/slotRules/index'));
const SlotExtra = React.lazy(() => import('../../filter/slotExtra/index'));
const SlotOrApi = React.lazy(() => import('../../case/slotOrApi/index'));
const UserReply = React.lazy(() => import('../../case/userReply/index'));
const FilterSet = React.lazy(() => import('../../filter/set/index'));
import UserSession from "@/UserSession";
const { TabPane } = Tabs;

class RightDrawer extends React.Component {
  state = {
    visible: false,
    rvalue: 'reply',
    dis: 'none',
    v1: true,
    v2: false,
    v3: false,
    specialVisible: true,
    triggerCase: 1,
  };

  componentDidMount() {
    if (this.props.onRef) {
      this.props.onRef(this);
    }
  }

  showDrawer = () => {
    this.setState({
      visible: true,
    });
  };

  onClose = () => {
    this.setState(
      {
        visible: false,
      },
      () => {
        this.props.onClosed();
      }
    );
  };

  change = event => {
    this.setState({
      rvalue: event.target.value,
    });
  };

  changeCase = e => {
    this.setState({
      triggerCase: e.target.value,
    });
  };

  checkModel = (model, dialogId, nodeIds) => {
    switch (model) {
      case 'start':
        return (
          <DialogStart
            nodeId={nodeIds}
            stage={model}
            dialogId={dialogId}
            closeDrawer={this.onClose}
          ></DialogStart>
        );
      case 'golbalSet':
        return (
          <Tabs defaultActiveKey="1">
            <TabPane tab="全局设置" key="1">
              <GlobalSet dialogId={dialogId}></GlobalSet>
            </TabPane>
            <TabPane tab="特殊情况处理" key="2">
              <SpecialCase type="1" dialogId={dialogId}></SpecialCase>
            </TabPane>
          </Tabs>
        );
      case 'slot':
        return (
          <Tabs defaultActiveKey="1">
            <TabPane tab="词槽询问" key="1">
              <CollectSlot nodeId={nodeIds} stage={model} dialogId={dialogId} />
            </TabPane>
            <TabPane tab="词槽值校验" key="2" ref="SlotCheck">
              <SlotCheck nodeId={nodeIds} stage={model} dialogId={dialogId} />
            </TabPane>
            <TabPane tab="用户语料标注" key="3">
              <DialogSlotMark
                nodeId={nodeIds}
                dialogId={dialogId}
                stage={model}
                type="slot"
              ></DialogSlotMark>
            </TabPane>
            <TabPane tab="词槽抽取规则" key="4">
              <SlotRules nodeId={nodeIds} stage={model} dialogId={dialogId} />
            </TabPane>
            <TabPane tab="特殊情况处理" key="5">
              <SpecialCase
                type="5"
                nodeId={nodeIds}
                dialogId={dialogId}
                stage={model}
              ></SpecialCase>
            </TabPane>
          </Tabs>
        );
      case 'action':
        return (
          <div>
            <div style={{ marginBottom: '30px' }}>
              <span style={{ color: '#000000', borderLeft: '3px solid #3F4959', paddingLeft: '10px', margin: '0 10px' }}>动作设置</span>
              <div style={{ margin: '15px 0px', paddingLeft: '30px' }}>
                动作类型&nbsp;&nbsp;
                <Radio.Group
                  value={this.state.rvalue}
                  onChange={event => {
                    this.change(event);
                  }}
                >
                  <Radio value={'reply'}>回复</Radio>
                  <Radio value={'api'}>调用API接口</Radio>
                  <Radio value={'clear'}>清空词槽</Radio>
                </Radio.Group>
              </div>
              {this.state.rvalue === 'clear' ? (
                <ActionClear
                  nodeId={nodeIds}
                  stage={model}
                  dialogId={dialogId}
                  closeDrawer={this.onClose}
                ></ActionClear>
              ) : (
                <div></div>
              )}
              {this.state.rvalue === 'api' ? (
                <ActionApi
                  nodeId={nodeIds}
                  stage={model}
                  dialogId={dialogId}
                  closeDrawer={this.onClose}
                ></ActionApi>
              ) : (
                <div></div>
              )}
              {this.state.rvalue === 'reply' ? (
                <ActionReply
                  nodeId={nodeIds}
                  stage={model}
                  dialogId={dialogId}
                  closeDrawer={this.onClose}
                ></ActionReply>
              ) : (
                <div></div>
              )}
            </div>
          </div>
        );
      case 'confirm':
        return (
          <Tabs defaultActiveKey="1">
            <TabPane tab="信息确认设置" key="1">
              <DialogConfirmSetting
                nodeId={nodeIds}
                dialogId={dialogId}
                stage={model}
              ></DialogConfirmSetting>
            </TabPane>
            <TabPane tab="用户语料标注" key="2">
              <DialogSlotMark
                nodeId={nodeIds}
                dialogId={dialogId}
                stage={model}
                type="confirm"
              ></DialogSlotMark>
            </TabPane>
            <TabPane tab="特殊情况处理" key="3">
              <SpecialCase nodeId={nodeIds} dialogId={dialogId} stage={model}></SpecialCase>
            </TabPane>
          </Tabs>
        );
      case 'filter':
        return (
          <Tabs defaultActiveKey="1">
            <TabPane tab="筛选设置" key="1">
              <FilterSet nodeId={nodeIds} dialogId={dialogId} stage={model} />
            </TabPane>
            <TabPane tab="语料标注" key="2">
              <DialogSlotMark nodeId={nodeIds} dialogId={dialogId} stage={model}></DialogSlotMark>
            </TabPane>
            <TabPane tab="词槽抽取" key="3">
              <SlotExtra nodeId={nodeIds} stage={model} dialogId={dialogId} />
            </TabPane>
            <TabPane tab="特殊情况" key="4">
              <SpecialCase nodeId={nodeIds} dialogId={dialogId} stage={model}></SpecialCase>
            </TabPane>
          </Tabs>
        );
      case 'case':
        return (
          <div>
            <div style={{ marginBottom: '30px' }}>
              <div style={{ margin: '15px 0px', paddingLeft: '30px' }}>
                触发条件类型&nbsp;&nbsp;
                <Radio.Group
                  value={this.state.triggerCase}
                  onChange={event => {
                    this.changeCase(event);
                  }}
                >
                  <Radio value={1}>词槽/API</Radio>
                  <Radio value={2}>用户回复</Radio>
                </Radio.Group>
              </div>
              {this.state.triggerCase === 1 ? (
                <SlotOrApi
                  nodeId={nodeIds}
                  stage={model}
                  dialogId={dialogId}
                  closeDrawer={this.onClose}
                />
              ) : (
                <UserReply
                  nodeId={nodeIds}
                  stage={model}
                  dialogId={dialogId}
                  closeDrawer={this.onClose}
                />
              )}
            </div>
          </div>
        );
      case 'wordTrough':
        return (
          <WordTrough
            slotList={this.props.slotList}
            slotLoading={this.props.slotLoading}
            addSlot={this.props.addSlot}
            handleDelSlot={this.props.handleDelSlot}
            closeSlotDialog={this.onClose}
          />
        );
      default:
        return <div>开始模块1</div>;
    }
  };

  checkAction = async () => {
    const { model, nodeIds, dialogId } = this.props;
    if (model === 'action') {
      let res = null;
      if (UserSession.isSystemKnowledge()) {
        res = await knowledgeDialogActionNodeInfo({ dialogId, nodeId: nodeIds });
      } else {
        res = await getActionNodeDetail({ dialogId: dialogId, nodeId: nodeIds });
      };
      this.setState({
        rvalue: res.field ? res.field : 'reply',
      });
    } else if (model === 'case') {
      let res = null;
      if (UserSession.isSystemKnowledge()) {
        res = await knowledgeDialogNodeInfo({
          nodeType: 'case',
          dialogId,
          nodeId: nodeIds,
          field: 'data',
        })
      } else {
        res = await getStageBydialogIdAndNodeId({
          stage: 'case',
          dialogId,
          nodeId: nodeIds,
          field: 'data',
        });
      }
      this.setState({
        triggerCase: res.dialogStage.data
          ? res.dialogStage.data.caseType === 'user_reply'
            ? 2
            : 1
          : 1,
      });
    }
  };

  render() {
    const { title, visible, model, dialogId, nodeIds } = this.props;
    return (
      <Suspense fallback={<PageLoading />}>
        <div id={'rightDrawer'}>
          <Drawer
            closable
            width="800"
            title={title}
            placement="right"
            onClose={this.onClose}
            visible={visible}
            destroyOnClose
          >
            {this.checkModel(model, dialogId, nodeIds)}
          </Drawer>
        </div>
      </Suspense>
    );
  }
}

export default RightDrawer;
